<template>
    <q-dialog v-model="detail"  >
        <OrderDetailPage :part-id="partId" :order-id="orderId"></OrderDetailPage>
    </q-dialog>
    <q-dialog v-model="repairingDetail" >
      <MyBigDialog title="Repairing Detail">
        <FinalCheckForm class="q-pa-md" mode="report" :is-parent="isParent" :serial-no="serialNo" :stock-code="stockCode" :order-id="orderId"></FinalCheckForm>
      </MyBigDialog>
    </q-dialog>
    <ReportPage>
      <q-table
          class="my-table card-radius"
          wrap-cells
          flat
          bordered
          title="Obsolescence Management"
          titleClass="page-header"
          :pagination="{ rowsPerPage: 50 }"
          row-key="id"
          no-data-label="No data found."
          no-results-label="The filter didn't uncover any results"
            :columns="createForm.data.columns"
                :rows="createForm.data.rows" >
                <template v-slot:top-row="props">
                    <q-td>
                        <!-- {{ props.cols[0].label }} -->
                        <q-input borderless :label="props.cols[0].label" dense v-model="query.data.stock_code" filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>
                    <q-td>
                        <q-input borderless :label="props.cols[1].label" dense v-model="query.data.description"
                            filled>
                            <template v-slot:default>
                                <q-icon name="search" />
                            </template>
                        </q-input>
                    </q-td>
                </template>
            </q-table>
    </ReportPage>
  </template>
  
  <script setup lang="ts">
  import ReportPage from 'src/pages/ReportPage.vue';
  import { HistoryReport, HistorySearch, RepairOrderHistory } from 'src/services/type';
  import { computed, ref ,reactive,onMounted,watch} from 'vue';
  import { QTableColumn, useQuasar } from 'quasar';
  import { exportTable } from 'src/utils/exportCsvUtils';
  import { OutgoingRecord, splorp } from 'src/services/type';
  import { repairOrderHistory } from 'src/services/reportService';
  import { formatDateTimeString } from 'src/utils/dateUtils';
  import { useRouter } from 'vue-router';
  // import ObsolescenceTip from '../ObsolescenceTip.vue';
import { obsolescenceManagementList, obsolescenceManagement } from 'src/services/type';
import { get_obsolescence_management_list } from 'src/services/SpareLocationReport';
const query = reactive<{
    data: obsolescenceManagement;
}>({
    data: {
        stock_code: '',
        description: '',
    }
})
const createForm = reactive<{
    data: obsolescenceManagementList;
}>({
    data: {
        rows: [],
        columns: [
            {
                name: 'stock_code',
                label: 'Stock Code',
                field: 'stock_code',
                align: 'center',
                sortable: true,
            },
            {
                name: 'short_description',
                label: 'Short Description',
                field: 'description',
                align: 'center',
                sortable: true,
            },
        ]
    }
});
watch(query.data, () => {
    // 调用筛选函数
    console.log("------监控obsolescenceManagement------")
    resportlist();
});
const reportlist = ref<Array<obsolescenceManagement>>([])
async function resportlist() {
    createForm.data.rows = reportlist.value.filter(item => {
        return (
            item.stock_code.includes(query.data.stock_code) &&
            item.description.includes(query.data.description)
        );
    })
}
async function getlist() {
    console.log("------obsolescenceManagement------")
    const res = await get_obsolescence_management_list();
    createForm.data.rows = res.data;
    reportlist.value = res.data;
}
onMounted(() => {
    getlist()
});
  const $q = useQuasar();
  
  /* const = ref() */
  const orderId = ref(0)
  const partId = ref(0)
  const serialNo = ref('')
  const stockCode = ref('')
  const isParent = ref(false)
  
  const searchDig = ref(false)
  
  const detail = ref(false)
  const repairingDetail = ref(false)
  
  const rows = ref<RepairOrderHistory[]>()
  
  async function search(form: { data: HistorySearch}){
    showLoading()
    const res =  await repairOrderHistory(form.data)
    console.log(res);
    rows.value = res
    searchDig.value = false
    $q.loading.hide()
  }
  
  
  function showLoading() {
    $q.loading.show({
      message: 'Doing something. Please wait...',
      boxClass: 'bg-grey-2 text-grey-9',
      spinnerColor: 'primary',
    });
  }
  
  function openOrderDetail(order_id: number, part_id:number){
    detail.value = true
    orderId.value =order_id
    partId.value =part_id
  }
  
  function openRepairingDetail(order_id: number, stock_code: string, serial_no: string, is_parent: boolean){
    repairingDetail.value = true
    orderId.value = order_id
    stockCode.value = stock_code
    serialNo.value = serial_no
    isParent.value = is_parent
    
  }
  
  const router = useRouter();
  
  function onRowClick(evt: any, row: any) {
    router.push(`/maintenance/order/${row.id}`);
  
  }
  
  const colsFilter = ref<typeof ColsFilter>();
  
  function filterFn(row: RepairOrderHistory) {
    if (colsFilter.value) {
      return colsFilter.value.filterFn(row);
    }
  }
  
  const filterRows = computed(() => {
    return rows.value?.filter(filterFn);
  });
  
  // function dblclickFn(evt: any, row: RepairOrderHistory, index: number) {
  //   id.value = row.id ;
  //   part_id.value = row.part_id ;
  //   detail.value = true;
  // }
  </script>
  
  <style scoped></style>
  